<template>
  <div>
    <el-dialog
      class="add-pop edit-MaterialMangePop"
      title="编辑"
      width="50%"
      @close="closeMPEPop"
      :visible.sync="dialogVisibleEdit"
      :close-on-click-modal="false"
    >
      <el-form label-width="110px" :model="dataFormAdd" ref="dataFormAdd">
        <el-form-item label="文件名称">
          <el-input
            :disabled="true"
            v-model="dataFormAdd.name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件大小">
          <el-input
            :disabled="true"
            v-model="dataFormAdd.mediaSizeStr"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件格式">
          <el-input
            :disabled="true"
            v-model="dataFormAdd.style"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-select
            clearable
            @change="mediaTypeChange"
            filterable
            v-model="dataFormAdd.mediaType"
            filterable
          >
            <el-option
              v-for="item in bcMediaTypeOption"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 当文件类型为宣传物料 -->
        <div v-if="dataFormAdd.mediaType == 1 || controlDowbList.propaganda">
          <el-form-item label="颜色模式">
            <el-select
              clearable
              @change="mediaTypeChange"
              filterable
              v-model="dataFormAdd.colourMode"
              filterable
            >
              <el-option
                v-for="item in mediaColourModeOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分辨率">
            <el-select
              clearable
              @change="mediaTypeChange"
              filterable
              v-model="dataFormAdd.resolution"
              filterable
            >
              <el-option
                v-for="item in mediaResolutionOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件尺寸">
            <el-select
              clearable
              @change="mediaTypeChange"
              filterable
              v-model="dataFormAdd.measure"
              filterable
            >
              <el-option
                v-for="item in mediaMeasureOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 落地页显示 -->
        <div v-if="dataFormAdd.mediaType == 4 || controlDowbList.pageHttp">
          <el-form-item label="活动选择">
            <el-select
              clearable
              filterable
              @change="activityChange"
              v-model="dataFormAdd.activity"
              filterable
            >
              <el-option
                v-for="item in activityOptions"
                :key="item.id"
                :label="item.activityName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动编码">
            <el-input
              v-model="activity.code"
              :disabled="true"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动名称">
            <el-input
              :disabled="true"
              v-model="activity.name"
              placeholder="活动名称"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 媒体报道 -->
        <div v-if='dataFormAdd.mediaType == 7 ||controlDowbList.media'>
          <el-form-item label="链接地址">
            <el-input
              v-model="dataFormAdd.linkUrl"
              placeholder="链接地址"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item :label="useInfo ? '使用说明' : '活动简介'">
          <el-input
            type="textarea"
            style="heigth:39px;"
            v-model="dataFormAdd.explainInfo"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <!-- 视频 -->
        <div  v-if='dataFormAdd.mediaType == 5 ||controlDowbList.video'>
          <el-form-item label="视频比例">
            <el-select
              clearable
              filterable
              v-model="dataFormAdd.videoScale"
              filterable
            >
              <el-option
                v-for="item in videoScaleOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 如果类型是海报并且不是物料管理，才显示活动，如果是海报并且是物料管理，不显示活动 -->
        <div  v-if='dataFormAdd.mediaType == 3||dataFormAdd.mediaType == 8&&controlDowbList.poster&&displayPageParams.manageType!=1'>
          <el-form-item label="二维码位置">
            <el-select
              clearable
              filterable
              v-model="dataFormAdd.qrCodePlace"
              filterable
            >
              <el-option
                v-for="item in QRcodePlaceOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二维码来源">
            <el-select
              clearable
              filterable
              v-model="dataFormAdd.qrCodeDataFrom"
              @change="qrCodeDataFromChange"
              filterable
            >
              <el-option
                v-for="item in bcQRcodeDataFromOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <div  v-if='activityChoice'>
            <el-form-item label="活动选择">
            <el-select
              clearable
              filterable
              @change="activityChange"
              v-model="dataFormAdd.activity"
              filterable
            >
              <el-option
                v-for="item in activityOptions"
                :key="item.id"
                :label="item.activityName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动编码">
            <el-input
              v-model="activity.code"
              :disabled="true"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动名称">
            <el-input
              :disabled="true"
              v-model="activity.name"
              placeholder="活动名称"
            ></el-input>
          </el-form-item>
          </div>
          
        </div>
        <el-form-item label="预览图">
          <el-upload
            class="upload-demo"
            ref="upload"
            :with-credentials="true"
            :action="uploadSuffixUrl + '/mediaInfo/upload'"
            :on-success="handleAvatarSuccess"
            list-type="jpg"
            :file-list="fileList"
            :data="UploadData"
            :on-change="yulanUpload"
            :on-exceed='onExceed'
            :auto-upload="true"
            :limit='1'
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            
            <!-- <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            > -->
            <!-- <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
          </el-upload>
          <a
            :href="imageUrl || dominIMGUrl + '/' + dataFormAdd.previewUrl"
            v-if="imageUrl || dataFormAdd.previewUrl"
            target="_blank"
            class="tosee"
            >预览</a
          >
        </el-form-item>
        <el-form-item label="封面上传方式">
          <el-select
            clearable
            filterable
            v-model="coverValue"
          >
            <el-option
              v-for="item in coverOption"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-if='coverValue==1'>
          <el-form-item label="封面图">
            <el-row>
              <el-col :span="16">
                <!-- 裁剪 -->
                <vue-cropper
                  ref="cropper"
                  :img="option.img || imgUrl"
                  :output-size="option.size"
                  :output-type="option.outputType"
                  :info="true"
                  :full="option.full"
                  :can-move="option.canMove"
                  :can-move-box="option.canMoveBox"
                  :fixed-box="option.fixedBox"
                  :fixed="option.fixed"
                  :fixedNumber="option.fixedNumber"
                  :original="option.original"
                  :auto-crop="option.autoCrop"
                  :auto-crop-width="option.autoCropWidth"
                  :auto-crop-height="option.autoCropHeight"
                  style="height:400px"
                  :center-box="option.centerBox"
                  @real-time="realTime"
                  :high="option.high"
                ></vue-cropper>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="封面预览">
            <div
              class="show-preview"
              :style="{
                width: previews.w + 'px',
                height: previews.h + 'px',
                overflow: 'hidden',
                margin: '5px',
                
              }"
            >
              <div :style="previews.div">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </div>
            <el-row class="footerBtn">
              <el-button type="primary" size="mini" @click="cut('blob')"
                >上传封面图</el-button
              >
              <!-- <el-button type="primary" size="mini" round="" @click="handleClose">取消</el-button> -->
            </el-row>
          </el-form-item>
        </div>
        <div v-if='coverValue==2'>
          <el-form-item label="本地上传">
            <el-row>
              <el-upload
                class="upload-demo"
                style="float:none"
                drag
                ref='coverUpload'
                :action='uploadUrl'
                :limit="limitNum"
                :auto-upload="false"
                :with-credentials='true'
                :on-change="coverUpload"
                :file-list="fileList"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-row>
            <!-- <el-row class="footerBtn">
              <el-button type="primary" size="mini" @click="coverSubmit()"
                >上传封面图</el-button
              >
            </el-row> -->
          </el-form-item>
          
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="closeMPEPop">{{
          $t("action.cancel")
        }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitAdd('dataFormAdd')"
          :loading="editLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CrmTable from "@/views/Core/CrmTable";
import KtButton from "@/views/Core/KtButton";
import WebUploadIMG from "@/components/common/upload/WebUploadIMG";
import { VueCropper } from "vue-cropper";
import { baseUrl } from "@/utils/global";
import SparkMD5 from "spark-md5";
export default {
  name: "MaterialPackageEidtPop",
  props: {
    dataFormAdd: Object,
    dialogVisibleEdit: Boolean, //弹窗显示
    baseUrl: String,
    imgUrl: "",
    displayPageParams:Object
  },
  components: {
    CrmTable,
    KtButton,
    VueCropper,
    WebUploadIMG
  },
  data() {
    return {
      // showTrackingPop: false, //显示跟进窗口
      date: new Date(),
      contractDate: "",
      editLoading: false,
      size: "samll",
      mediaColourModeOption: [],
      bcMediaTypeOption: [],
      dialogImageUrl: "",
      dialogVisible: false,
      imageUrl: "",
      showImgVisible: false,
      uploader: {},
      uploadBtnDisabled: false,
      uploadStaus: "el-icon-upload",
      fileList: [], //显示集合
      chunked: true, //是否开启分片上传
      fileNumLimit: 3, //文件总数
      fileSize: 100 * 1024 * 1024 * 1024, //默认上传文件大小
      chunkSize: 30 * 1024 * 1024, //默认文件片段
      uploadSuffixUrl: baseUrl,
      imageUrl: "",
      options2: {
        compress:null,
        //允许上传的文件
        fileType:
          "",
        fileUploadUrl: "/mediaInfo/upload", //上传地址
        fileCheckUrl: "/mediaInfo/checkFile", //检测文件是否存在url
        checkChunkUrl: "/mediaInfo/checkFile", //检测分片url
        // mergeChunksUrl: "/upload/fileRecord/zone/upload/merge/", //合并文件请求地址
        headers: {}
      },
      previews: {}, //实时预览图数据
      option: {
        img: "",
        size: 1,
        full: false,
        outputType: "jpeg",
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        fixedNumber: [16, 9],
        fixed: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 500,
        autoCropHeight: 150,
        infoTrue: true,
        centerBox: false,
        high: true
      },
      imgUploadUrl: "",
      fileName: "", //本机文件地址
      uploadImgRelaPath: "", //上传后图片地址
      imgbacse64: "",
      UploadData: {},
      useInfo: false, //编辑的时候弹出使用说明
      materielType: "",
      activityOptions: [],
      activity: {},
      controlDowbList: {
        propaganda: false,
        report: false,
        advertisement: false,
        poster: false,
        pageHttp: false,
        video: false,
        article: false,
        media: false,
        
      },
      allActivityOptions:[],
      activityChoice:false,
      qrCodeShow:false,
      coverOption:[
        {
          value:'预览图截取',
          key:'1'
        },
        {
          value:'本地上传',
          key:'2'
        }
      ],
      coverValue:'',
      uploadUrl: baseUrl + "/mediaInfo/upload", //文件上传地址
      limitNum: 1, //上传最大个数
      baseUrl: baseUrl,
      coverUploadData:{}
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.dataFormAdd.previewUrl = file.response.msg;
      this.option.img = URL.createObjectURL(file.raw);
    },
    onExceed(){
      this.$message.error({
          showClose: true,
          message: "超出文件上传个数，请删除上传队列后重试！"
        });
    },
    yulanUpload(file, fileList) {
      const _this = this;
      var fileReader = new FileReader();
      //此处打印file可看到file下的raw为文件属性
      var dataFile = file.raw;
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      var spark = new SparkMD5.ArrayBuffer();
      //获取文件二进制数据
      fileReader.readAsArrayBuffer(dataFile);

      //异步执行函数
      fileReader.onload = function(e) {
        spark.append(e.target.result);
        var md5 = spark.end();
        // 
        //此处this指向发生改变，需提前声明const _this = this
        _this.UploadData.fileMd5 = md5; //此处是将文件的md5值放入imgdata中
        // 
        //上传图片，如手动上传可不在此处执行
        // _this.upload('frontImg')
      };
      _this.UploadData.name = file.name;
      _this.UploadData.size = file.size;
    },
    coverUpload(file, fileList) {
      const _this = this;
      var formData = new FormData();
      var fileReader = new FileReader();
      var spark = new SparkMD5.ArrayBuffer();
      //此处打印file可看到file下的raw为文件属性
      var dataFile = file.raw;
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      var spark = new SparkMD5.ArrayBuffer();
      //获取文件二进制数据
      fileReader.readAsArrayBuffer(dataFile);
      let timestamp = Date.parse(new Date());
      let filename = timestamp + "封面截图";
      //异步执行函数
      fileReader.onload = function(e) {
        spark.append(e.target.result);
        var md5 = spark.end();
        //此处this指向发生改变，需提前声明const _this = this
        formData.append("fileMd5", md5);
      };
      formData.append("file", file.raw);
      formData.append("name", filename + ".jpg");
      formData.append("size", file.size);
      this.$axios
          .post(_this.baseUrl + "/mediaInfo/upload", formData, {
            contentType: false,
            processData: false,
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            let response = res.data;
            if (response.result == 1) {
              _this.dataFormAdd.frontCoverUrl = response.msg;
              _this.$message.success("上传成功！");
            } else {
              _this.$message.error(response.msg);
            }
          });
    },
    coverSubmit(){
      this.$refs.coverUpload.submit();
    },
    submitUpload(file,fileList) {
      this.$refs.upload.submit();
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handShowTracking: function() {
      this.$emit("handShowTracking", { index: index, row: row });
    },
    colseTrackingPop: function() {
      this.$emit("colseTrackingPop");
    },
    submitAdd() {
      this.$emit("submitAdd", this.dataFormAdd);
    },
    closeMPEPop() {
      this.$emit("closeMPEPop", this.dialogVisibleEdit);
      this.controlDowbList= {
        propaganda: false,
        report: false,
        advertisement: false,
        poster: false,
        pageHttp: false,
        video: false,
        article: false,
        media: false
      }
      this.fileList=[]
    },
    //给一个对象设置某个值为true 其他为false
    changeOneKey(myobj, cahngekey) {
      for (let i in myobj) {
        //        //下标 //flag   flag1  flag2 flag3  下标（key）
        //  //内容
        if (i == cahngekey) {
          myobj[i] = true;
        } else {
          myobj[i] = false;
        }
      }
    },
    mediaTypeChange(value) {
      this.$emit("mediaTypeChange", value);
      //控制活动简介
      this.materielType = value;
      switch (value) {
        case '1': 
          this.changeOneKey(this.controlDowbList, "propaganda");
          this.useInfo=true
          break;
        
        case '2': 
          this.changeOneKey(this.controlDowbList, "advertisement");
          this.useInfo=false
          break
        
        case '3': 
          this.changeOneKey(this.controlDowbList, "poster");
          this.useInfo=false
          break
        
        case '4': 
          this.changeOneKey(this.controlDowbList, "pageHttp");
          this.useInfo=false
          this.getActivity();
          break
        
        case '5': 
          this.changeOneKey(this.controlDowbList, "video");
          this.useInfo=true
          break
        
        case '6': 
          this.changeOneKey(this.controlDowbList, "article");
          break
        
        case '7': 
          this.changeOneKey(this.controlDowbList, "media");
          this.useInfo=true
          break
        
        case '8': 
          this.changeOneKey(this.controlDowbList, "poster");
          this.useInfo=false
          break
      }
      if(this.displayPageParams.manageType==1){
        this.qrCodeShow=true
      }
      
    },
    // 获取分中心活动
    getActivity() {
      this.$api.agent.getActivityManage().then(res => {
        if (res.result == 1) {
          this.activityOptions = res.activityManagerList;
        }
      });
    },
    // 获取全部活动
    getSubcenterActivity(){
      this.$api.agent.extensionManPageList().then(res => {
        if (res.result == 1) {
          this.allActivityOptions = res.data;
        }
      });
    },
    // 获取数据回显
    initPageData() {
      this.getActivity();
      this.activityOptions.forEach(item => {
        if (item.id == value) {
          this.activity.code = item.activityCode;
          this.activity.name = item.activityName;
        }
      });
    },
    activityChange(value) {
      this.activityOptions.forEach(item => {
        if (item.id == value) {
          this.activity.code = item.activityCode;
          this.activity.name = item.activityName;
        }
      });
      this.allActivityOptions.forEach(item => {
        if (item.id == value) {
          this.activity.code = item.activityCode;
          this.activity.name = item.activityName;
        }
      });
    },
    getDownList() {
      // 文件类型
      this.$api.user.optionsList({ codeType: "bc_media_type" }).then(res => {
        this.bcMediaTypeOption = res.keyValueList;
        if(this.displayPageParams.manageType==2){
          // 删除宣传物料，媒体报道
          this.bcMediaTypeOption.splice(0,1)
          this.bcMediaTypeOption.splice(5,1)
        }
      });
      // 颜色模式
      this.$api.user
        .optionsList({ codeType: "media_colour_mode" })
        .then(res => {
          this.mediaColourModeOption = res.keyValueList;
        });
      // 分辨率
      this.$api.user.optionsList({ codeType: "media_resolution" }).then(res => {
        this.mediaResolutionOption = res.keyValueList;
      });
      // 文件尺寸
      this.$api.user.optionsList({ codeType: "media_measure" }).then(res => {
        this.mediaMeasureOption = res.keyValueList;
      });
      // 视频比例
      this.$api.user.optionsList({ codeType: "video_scale" }).then(res => {
        this.videoScaleOption = res.keyValueList;
      });
       // 二维码位置
      this.$api.user.optionsList({ codeType: "QRcode_place" }).then(res => {
        this.QRcodePlaceOption = res.keyValueList;
      });
      // 二维码来源
      this.$api.user.optionsList({ codeType: "bc_QRcode_data_from" }).then(res => {
        this.bcQRcodeDataFromOption = res.keyValueList;
      });
      
    },

    //实时预览
    realTime(data) {
      this.previews = data;
    },
    blobToFile(blob, fileName) {
      blob.lastModifiedDate = new Date();
      blob.name = fileName;
      return blob;
    },
    //确认截图,上传
    cut(type) {
      const _this = this;
      var formData = new FormData();
      var fileReader = new FileReader();
      var spark = new SparkMD5.ArrayBuffer();

      this.$refs.cropper.getCropBlob(res => {
        //res是裁剪后图片的bolb对象
        let timestamp = Date.parse(new Date());
        let filename = timestamp + "封面截图";
        let file = new window.File([res], filename);
        //获取文件二进制数据
        fileReader.readAsArrayBuffer(file);
        //异步执行函数
        fileReader.onload = function(e) {
          spark.append(e.target.result);
          let cutMd5 = spark.end();
          //此处this指向发生改变，需提前声明const _this = this
          formData.append("fileMd5", cutMd5);
        };
        formData.append("file", file);
        formData.append("name", filename + ".jpg");
        formData.append("size", file.size);
        // formData.append("fileMd5", md5);

        this.$axios
          .post(_this.baseUrl + "/mediaInfo/upload", formData, {
            contentType: false,
            processData: false,
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            let response = res.data;
            if (response.result == 1) {
              _this.dataFormAdd.frontCoverUrl = response.msg;
              _this.$message.success("上传成功！");
            } else {
              _this.$message.error(response.msg);
            }
          });
      });
    },
    // 获取上传图片域名
    getIMGUrl() {
      this.$api.user
        .optionsList({ codeType: "fastdfs_fileServerUrl" })
        .then(res => {
          this.dominIMGUrl = res.keyValueList[0].value;
        });
    },
    urlToBase64(url) {
      return new Promise((resolve, reject) => {
        let image = new Image();
        var timestamp = new Date().getTime();
        image.onload = function() {
          let canvas = document.createElement("canvas");
          canvas.width = this.naturalWidth;
          canvas.height = this.naturalHeight;
          // 将图片插入画布并开始绘制
          canvas.getContext("2d").drawImage(image, 0, 0);
          // result
          let result = canvas.toDataURL("image/jpg");
          resolve(result);
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin", "anonymous");
        image.src = url + "?" + timestamp;
        // 图片加载失败的错误处理
        image.onerror = () => {
          reject(new Error("图片流异常"));
        };
      });
    },
    // 图片url转base64
    dataURLtoFile(dataurl, filename) {
      //将base64转换为文件
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    // base64转file
    base64ConvertFile(urlData, filename) {
      // 64转file
      if (typeof urlData != "string") {
        this.$toast("urlData不是字符串");
        return;
      }
      var arr = urlData.split(",");
      var type = arr[0].match(/:(.*?);/)[1];
      var fileExt = type.split("/")[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], "filename." + fileExt, {
        type: type
      });
    },
    qrCodeDataFromChange(val){
      if(val==2){
        this.activityChoice=true
      }else{
        this.activityChoice=false
      }
    }
  },
  watch: {
    dataFormAdd(newVlue, old) {
      if(newVlue.qrCodeDataFrom==2){
        this.activityChoice=true
        this.activity.id=newVlue.activity
      }else{
        this.activityChoice=false
      }
      this.activityOptions.forEach(item => {
        if (item.id == this.activity.id) {
          this.activity.code = item.activityCode;
          this.activity.name = item.activityName;
        }
      });
      // 回显预览图
      if(newVlue.previewUrl){
        this.urlToBase64(this.dominIMGUrl + "/" + newVlue.previewUrl).then(
          res => {
            this.option.img = URL.createObjectURL(
              this.base64ConvertFile(res, "aa")
            );
          }
        );
      }else{
        this.option.img=''
      }
    },
    // pageManageType(newVlue,old){
    //   if(newVlue!=1){
    //     this.controlDowbList.poster=true
    //   }
    //   
    // }
  },
  mounted() {
    this.getDownList();
    this.option.img = this.dataFormAdd.frontCoverUrl;
    this.getIMGUrl();
    this.initPageData();
    if(this.$route.query.manageType!=1){
      this.controlDowbList.poster=true
    }
  }
};
</script>
<style lang="scss">
.edit-MaterialMangePop{
  .el-upload{
    float: left;
    width: 100%;
    height: 100%;
    .el-upload-dragger{
      width: 100%;
    }
  }
  .el-upload-list__item-name{
    clear: both;
    margin-top: 60px;
  }
  .el-upload-list{
    clear: both;
  }
}
</style>
<style lang="scss" scoped>
.edit-MaterialMangePop {
  .avatar-uploader {
    width: 500px;
    height: auto;
    float: left;
    img {
      width: 100%;
      display: block;
      float: left;
    }
  }
  .upload-demo{
    float: left;
  }
  .tosee {
    display: block;
    float: left;
    margin-left: 30px;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    margin-top: 3px;
    line-height: 32px;
    padding: 0px 20px;
    font-size: 14px;
    border-radius: 4px;
    background: #1A7284;
    color: #fff;
  }
}

/* 弹性布局 水平居中 */
.show-preview {
  display: flex;
  justify-content: center;
}

.preview {
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #cccccc;
  background: #cccccc;
}
.footerBtn {
  float: left;
}
.box {
  position: relative;
  height: 100%;
}
.wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  height: calc(100% - 50px);
}
.vue-cropper {
  background: black;
  background-image: none !important;
}
.btn {
  height: 50px;
  background: #565656;
  width: 100%;
  padding: 0 15px;
}
.btn a {
  color: white;
  font-size: 0.16rem;
  display: inline-block;
  line-height: 50px;
}
.btn a:nth-of-type(1) {
  float: left;
}
.btn a:nth-of-type(2) {
  float: right;
}
</style>
